<template>
  <!-- 折线图 -->
  <div id="zheline" :style="{ width: '100%', height: '400px' }"></div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import * as echarts from "echarts";
import service from "../../../util/service";

// 折线图数据
const zheLineDate = ref([] as any);

(async () => {
  const res = await service("reports/type/1");
  zheLineDate.value = res.data.data as any;
})();

watch(
  () => zheLineDate.value,
  async() => {
    //需要获取到element,所以是onMounted的Hook
    let myChart = echarts.init(
      document.getElementById("zheline") as HTMLElement
    );
    const red=ref(zheLineDate.value.series as any)
    // 得到地区
    const res=red.value.map((item:any)=>item.name);
    // 绘制图表
    myChart.setOption({
      title: {
        text: "组织的任务",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: res,
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
        ...zheLineDate.value.xAxis[0].data
      ],
      },
      yAxis: {
        type: "value",
      },
      series: zheLineDate.value.series,
    });
    window.onresize = function () {
      //自适应大小
      myChart.resize();
    };
  }
);
</script>

<style scoped></style>
